<template>
  <div class="tab_home">
    <!-- 通知和搜索 -->
    <div>
      <div class="van-search" style="background: #dddddd">
        <img :src="newlogo" alt="" style="width: 23%; height: 1.3rem" />
        <div
          class="van-search__content van-search__content--round"
          @click="$router.push({ name: 'search' })"
        >
          <div class="van-cell van-cell--borderless van-field">
            <div class="van-field__left-icon">
              <i
                class="van-icon van-icon-search"
                style="height: 1.1rem; color: #686869"
              ></i>
            </div>
            <div class="van-cell__value van-cell__value--alone">
              <div class="van-field__body">
                <input
                  type="search"
                  placeholder="请输入产品名称"
                  class="van-field__control"
                />
              </div>
            </div>
          </div>
        </div>
        <span @click="redirectTo('/order')" style="margin-left: 2%">
          &nbsp;
          <!-- <van-icon name="cart" size="22" color="#1d5ae8" /> -->
        </span>
      </div>
    </div>

    <!-- banner  暂定高230  宽100% -->
    <van-swipe
      :autoplay="3000"
      indicator-color="#1d5ae8"
      class="banner"
      @change="bannerChange"
    >
      <van-swipe-item v-for="(banner, index) in shopInfos.banner" :key="index">
        <div class="topback" style="backgroundcolor: #dddddd"></div>
        <div class="bottomback"></div>
        <img :src="banner.url" @click="redirectTo(banner.link)" />
      </van-swipe-item>
    </van-swipe>

    <!-- 安全复工必备好物 -->
    <van-row
      v-if="false"
      style="
        padding: 5px 0;
        background-color: #fff;
        margin: 0 15px;
        border-radius: 10px;
      "
    >
      <van-col span="24">
        <van-row
          style="
            color: rgba(16, 16, 16, 0.33);
            text-align: center;
            margin: 3px 10px 0px 3px;
            font-size: 11px;
          "
        >
          <van-col span="6">
            <van-icon name="good-job-o" />&nbsp;原厂正品
          </van-col>
          <van-col span="6"> <van-icon name="like-o" />&nbsp;精选品质 </van-col>
          <van-col span="6">
            <van-icon name="clock-o" />&nbsp;急速送达
          </van-col>
          <van-col span="6">
            <van-icon name="service-o" />&nbsp;优质服务
          </van-col>
        </van-row>
        <van-row>
          <van-col span="24" @click="redirectTo(returnWorkLink)">
            <img :src="returnWorkPng" width="100%" />
          </van-col>
        </van-row>
      </van-col>
    </van-row>

    <!-- 商品分类 -->
    <div class="goods_cls">
      <!-- 小标题导航 -->
      <van-swipe class="tapchose">
        <van-swipe-item>
          <div class="function">
            <van-row style="">
              <van-col
                span="6"
                @click="pushTabbar(nav)"
                style="padding-top: 15px"
                v-for="(nav, ind) in changneltop"
                :key="ind"
              >
                <div>
                  <img
                    v-lazy="nav.iconUrl"
                    alt=""
                    style="width: 3rem; "
                  />

                  <br />
                  <span>{{ nav.name }}</span>
                </div>
              </van-col>
            </van-row>
          </div>
          <!-- <div style="display: flex; flex-wrap: wrap; justify-content: right">
            <div
              v-for="(nav, index) in changneltop"
              :key="index"
              style="
                width: 25%;
                text-align: center;
                padding: 6px;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
              "
            >
              <div
                @click="pushTabbar(nav)"
                style="
                  position: relative;
                  width: 85%;
                  height: 0;
                  padding-top: 100%;
                "
              >
                <img
                  :src="nav.iconUrl"
                  style="
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                  "
                />
              </div>
              <span>{{ nav.name }}</span>
            </div>
          </div> -->
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 安全复工抢好物图片 -->
    <van-row>
      <van-col
        style="
          margin: 20px 16px 0 16px;
          border-radius: 5px;
          overflow: hidden;
          padding-bottom: 10px;
        "
      >
        <img :src="returnWorkGif1" width="100%" style="vertical-align: top" />
      </van-col>
    </van-row>

    <!-- 商品分类 -->
    <van-row style="width: 100%; height: 100%">
      <!-- 侧边栏区域 -->
      <div class="vansidebarlist">
        <div class="minden" style="">
          <p class="vansidebar" style="padding: 0">向下滑动</p>
          <p
            v-for="(item, index) in sideBarList"
            @click="onChange(index, item.name)"
            :key="index"
            :class="index == activeKey ? 'vansidebarhei' : 'vansidebar'"
          >
            {{ item.name }}
          </p>
        </div>
      </div>
      <!-- 右侧内容区域 -->
      <van-col style="padding-left: 10px" span="19">
        <!-- 上面的图片 -->
        <div class="hot_cont_top">
          <span>{{ titleClass }}</span>
        </div>
        <!-- 数据渲染内容区域 -->
        <van-list
          :immediate-check="false"
          finished-text="没有更多了"
          v-model="loading"
          :finished="finished"
          @load="onLoad"
          style="height: 80vh"
        >
          <van-row
            class="hot_cont"
            v-for="(item, index) in categoryDataList"
            :key="index"
            @click="itemClick(item)"
          >
            <van-col span="8">
              <div
                style="
                  position: relative;
                  width: 100%;
                  height: 0;
                  padding-top: 100%;
                "
              >
                <img
                  :src="item.gallery[0]"
                  style="
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                  "
                />
              </div>
              <!--<van-image radius="5" width="100%" :src="item.gallery[0]" />-->
            </van-col>
            <van-col span="16">
              <div class="hot_cont_rig">
                <div class="cont1">{{ item.name }}</div>
                <div class="cont2">{{ item.brief }}</div>
                <div class="cont3" v-if="item.keywords">
                  <span
                    v-for="(item1, index) in getKeywords(item.keywords)"
                    :key="index"
                    style="color: blue"
                  >
                    <van-tag class="tag" color="rgb(226, 232, 248)">{{
                      item1
                    }}</van-tag>
                  </span>
                </div>
                <div class="cont4">{{ (item.retailPrice * 100) | yuan }}</div>
                <div class="cont5" v-if="item.memberPrice">
                  <!-- <span>{{ (item.memberPrice * 100) | yuan }}</span> -->
                  <!-- <img src="@/assets/images/member_price.png" alt /> -->
                </div>
              </div>
            </van-col>
          </van-row>
        </van-list>
      </van-col>
    </van-row>
    <!-- </van-sticky> -->
    <!-- <div style="position: fixed; right: 20px; bottom: 60px; z-index: 9999">
      <van-icon :name="shopCartPng" size="40" @click="redirectTo('/order')" />
      <br />
      <van-icon :name="categoryPng" size="40" style="margin-top: 8px" @click="redirectTo('/items')" />
      <br />
    </div> -->
  </div>
</template>

<script>
import {
  getMallHome,
  goodsCategory,
  adList,
  ListByFirstCategory,
  listUsed,
  listRent,
  listTeam,
  listProject,
  dicItems,
  goodsList,
  firstCategory,
} from '@/api/api';
import scrollFixed from '@/mixin/scroll-fixed';
import _ from 'lodash';
import factory_outlet_tag from '@/assets/images/factory_outlet.png';
import newlogo from '@/assets/images/newlogo.png';
import logo_default from '@/assets/images/logo.jpg';
import personPng from '@/assets/images/mall_tabbar_person.png';
import shopCartPng from '@/assets/images/mall_tabbar_shopcart.png';
import categoryPng from '@/assets/images/mall_tabbar_category.png';
import hot_tag from '@/assets/images/hot.png';
import bottom_tag from '@/assets/images/bottom_tag.png';
import subList from '../items/category/sublist';

import {
  List,
  Swipe,
  SwipeItem,
  Tabbar,
  TabbarItem,
  Image,
  Search,
  Toast,
  Card,
  Row,
  Col,
  Tag,
  Tab,
  Tabs,
  Divider,
  SidebarItem,
  Sidebar,
  Sticky,
} from 'vant';
import $ from 'jquery';

export default {
  name: 'hot-sale',
  mixins: [scrollFixed],

  data() {
    return {
      newlogo: newlogo,
      shopInfos: [],
      titleClass: '',
      imgShow: true,
      textShow: false,
      indexSideBar: 0,
      category: {
        categoryId: null,
        limit: 10,
        page: 0,
      },
      categoryDataList: [],
      sideBarList: [],
      activeKey: 0,
      hot_tag: hot_tag,
      bottom_tag: bottom_tag,
      shopCartPng: shopCartPng,
      categoryPng: categoryPng,
      personPng: personPng,
      loading: false,
      finished: true,
      navList: [],
      navActive: 0,
      goodsSwiper: false,
      bannerBgColor: '#DDDDDD',
      logo_default: logo_default,
      swiperOption: {
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loop: true,
        autoplay: {
          delay: 2000,
          //当用户滑动图片后继续自动轮播
          disableOnInteraction: false,
        },
        disableOnInteraction: false,
        centeredSlides: true,
        slidesPerView: 4, //页面显示几个元素
        spaceBetween: 0, //元素margin-right
        loopFillGroupWithBlank: true,
      },
      shopInfos: [],
      findx: '',
      isLoading: false,
      cartInfo: 0,
      propsPopup: false,
      product_center: {},
      activities_center: {},
      returnWorkGif1: '',
      returnWorkGif2: '',
      returnWorkPng: '',
      returnWorkLink: '',
      factory_outlet_tag: factory_outlet_tag,
      activeGoodsLinkOne: '',
      activeGoodsImgOne: '',
      activeGoodsTitleOne: '',
      activeGoodsContentOne: '',
      activeGoodsLinkTwo: '',
      activeGoodsImgTwo: '',
      activeGoodsTitleTwo: '',
      activeGoodsContentTwo: '',
      activeGoodsLinkThree: '',
      activeGoodsImgThree: '',
      activeGoodsTitleThree: '',
      activeGoodsContentThree: '',
      activeGoodsLinkFour: '',
      activeGoodsImgFour: '',
      activeGoodsTitleFour: '',
      activeGoodsContentFour: '',
      goods_second_title_fontSize: '12px',
      changneltop: [],
      changneldown: [],
      goodsloop: [],
    };
  },

  created() {
    firstCategory()
      .then((res) => {
        this.sideBarList = res.data.data;

        this.activeKey;
        if (this.$route.query.index != undefined) {
          this.findx = this.$route.query.index;
          this.activeKey = this.findx;
          this.titleClass = this.sideBarList[this.findx].name;

          this.category.categoryId = this.sideBarList[this.findx].id;

          this.getCategoryDataList();
        } else {
          this.category.categoryId = this.sideBarList[0].id;

          this.titleClass = this.sideBarList[0].name;
          this.getCategoryDataList();
        }
      })
      .catch((err) => {});

    this.initFontSize();
    this.initViews();
    //获得一级分类
    this.getCategoryList();
  },
  // watch: {
  //   $route(to, from) {
  //     if (this.shopInfos != undefined) {
  //       this.bannerBgColor = this.shopInfos.banner[0].content;
  //     }
  //   }
  // },
  methods: {
    // 获取促销活动数据
    // getShopInfos() {
    //   getMallHome().then((res) => {
    //     this.shopInfos = res.data.data;
    //     this.categoryDataList.push(...this.shopInfos.hotGoodsList);
    //   });
    // },
    // 获得tag关键词
    getKeywords(str) {
      let arr = [];
      arr = str.split(',');
      return arr;
    },
    // 改变事件 sidebar
    onChange(index, name) {
      if (name == '向下滑动') {
        return;
      }
      this.titleClass = this.sideBarList[index].name;
      // if (index == 0) {
      //   this.categoryDataList = [];
      //   this.getShopInfos();
      // }
      this.category.categoryId = this.sideBarList[index].id;

      this.category.page = 0;
      if (0 >= this.category.page) {
        this.categoryDataList = [];
      }
      this.activeKey = index;
      // 获取元素
      let upsc = document.querySelector('.vansidebarlist');

      // upsc.scrollTop = 45 * index;
      this.getCategoryDataList();
    },

    // 获得一级分类列表
    getCategoryList() {
      // 如果index为0则说明是促销活动
    },
    // 获得一级分类下的数据
    getCategoryDataList() {
      this.category.page++;
      ListByFirstCategory(this.category)
        .then((res) => {
          this.categoryDataList.push(...res.data.data.list);

          this.loading = false;
          this.finished = res.data.data.page >= res.data.data.pages;
        })
        .catch((e) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },
    // 获取
    // van-list onload事件
    onLoad() {
      this.getCategoryDataList();
    },
    bannerChange(index) {
      this.bannerBgColor = this.shopInfos.banner[index].content;
    },
    initFontSize() {
      var deviceWidth = document.documentElement.clientWidth;
      if (deviceWidth > 750) {
        this.goods_second_title_fontSize = '12px';
      } else if (deviceWidth >= 414 && deviceWidth <= 750) {
        this.goods_second_title_fontSize = '12px';
      } else if (deviceWidth < 414 && deviceWidth > 360) {
        this.goods_second_title_fontSize = '11px';
      } else if (deviceWidth == 360) {
        this.goods_second_title_fontSize = '10.23px';
      } else if (deviceWidth < 360) {
        this.goods_second_title_fontSize = '9px';
      }
    },
    isNotEmpty(img) {
      if (img == undefined || img == null || img == '') {
        return false;
      } else {
        return true;
      }
    },
    pushTabbar(o) {
      let categoryId = o.id;
      this.$router.push({
        path: '/items',
        query: {
          itemClass: categoryId,
        },
      });
      // goodsCategory({ id: o.id }).then((res) => {
      //let categoryId = res.data.data.currentCategory.id;  //子级分类id
      // {
      //   path: '/items',
      //   query: { itemClass: categoryId },
      // }
      // let categoryId = o.id;
      // });
    },
    redirectTo(link) {
      if (link == null || link == '' || link == undefined) {
        return;
      }

      this.$router.push({
        path: link,
      });
    },
    // getSrc(item) {
    //   let image = logo_default;
    //   if (item.images.length != 0) {
    //     image = item.images[0];
    //   }
    //   return image;
    // },
    changeTabbar(o) {
      goodsCategory({
        id: o.id,
      }).then((res) => {
        //let categoryId = res.data.data.currentCategory.id;  //子级分类id
        let categoryId = o.id;
        this.$router.push({
          name: 'category',
          query: {
            itemClass: categoryId,
          },
        });
      });
    },
    async initgoodsloops() {
      //商品循环列表
      await adList({
        position: 14,
      }).then((res) => {
        this.goodsloop = res.data.data.list;
        if (this.goodsloop.length > 0) {
          this.goodsSwiper = true;
        }
      });
    },
    initViews() {
      //banner下方广告图
      adList({
        position: 13,
      }).then((res) => {
        this.returnWorkPng = res.data.data.list[0].url || '';
        this.returnWorkLink = res.data.data.list[0].link || '';
      });
      //口碑旗舰 安全复工 新品发布 无限回购
      adList({
        position: 15,
      }).then((res) => {
        this.activeGoodsLinkOne = res.data.data.list[0].link || '';
        this.activeGoodsImgOne = res.data.data.list[0].url || '';
        this.activeGoodsTitleOne = res.data.data.list[0].name || '';
        this.activeGoodsContentOne = res.data.data.list[0].content || '';
        this.activeGoodsLinkTwo = res.data.data.list[1].link || '';
        this.activeGoodsImgTwo = res.data.data.list[1].url || '';
        this.activeGoodsTitleTwo = res.data.data.list[1].name || '';
        this.activeGoodsContentTwo = res.data.data.list[1].content || '';
        this.activeGoodsLinkThree = res.data.data.list[2].link || '';
        this.activeGoodsImgThree = res.data.data.list[2].url || '';
        this.activeGoodsTitleThree = res.data.data.list[2].name || '';
        this.activeGoodsContentThree = res.data.data.list[2].content || '';
        this.activeGoodsLinkFour = res.data.data.list[3].link || '';
        this.activeGoodsImgFour = res.data.data.list[3].url || '';
        this.activeGoodsTitleFour = res.data.data.list[3].name || '';
        this.activeGoodsContentFour = res.data.data.list[3].content || '';
      });
      //下方动图
      adList({
        position: 16,
      }).then((res) => {
        this.returnWorkGif1 = res.data.data.list[0].url;
        // this.returnWorkGifLink = res.data.data.list[0].link || '';
        // this.returnWorkGif2 = res.data.data.list[1].url || '';
      });
      getMallHome().then((res) => {
        this.shopInfos = res.data.data;
        this.changneltop = this.shopInfos.channel;
        // this.changneldown = this.shopInfos.channel;
        this.bannerBgColor = this.shopInfos.banner[0].content;
      });
      
      this.initgoodsloops();
    },
    itemClick(row) {
      if (row.modular == 0 || row.modular == 2) {
        this.$router.push(`/items/detail/${row.id}/e`);
      } else {
        this.$router.push(`/raw/material-detail?id=` + row.id);
      }
    },
  },

  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Card.name]: Card,
    [Toast.name]: Toast,
    [Search.name]: Search,
    [List.name]: List,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Tag.name]: Tag,
    [Image.name]: Image,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Divider.name]: Divider,
    [subList.name]: subList,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [Sticky.name]: Sticky,
  },
};
</script>
<style lang="scss" scoped>
.function {
  // background-color: #fff;
  // margin: 0 4%;
  border-radius: 6px;

  div {
    text-align: center;

    span {
      font-size: 14px;
    }
  }
}
// 小图标
.tapchose {
  /deep/.van-swipe__indicators {
    bottom: 2px;
  }
  /deep/.van-swipe__track {
    height: auto;
  }

  /deep/.van-swipe__indicator {
    background-color: #1d5ae8;
  }
}
.vansidebarlist {
  float: left;
  width: 20%;
  height: 100%;
  background: rgb(231, 230, 230);
  overflow: scroll;
}

.vansidebarhei {
  background: white;
  transition: 0.5s;
}

.vansidebarhei {
  color: #1d5ae8;
  border-right: 2px solid #1d5ae8;
  font-weight: 650;
  text-align: center;
  padding: 1.5rem 0;
}

.vansidebar {
  width: 100%;
  text-align: center;
  padding: 1.5rem 0;
}

.minden {
  position: relative;
}

.swiper-slide {
  text-align: center;
  font-size: 12px;
  background: #fff;
  padding: 5px 0;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.8);
}

.vansidebarlist::-webkit-scrollbar {
  opacity: 0;
  display: none;
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  transform: scale(1);
}

/deep/.van-field__control[type='search'] {
  height: 1rem;
  // line-height: 1.1rem;
  font-size: 14px;
}

.van-cell__value--alone {
  height: 1.1rem;
}

.clear {
  clear: both;
}

.goods_cls {
  //box-shadow: rgb(188, 188, 188) 0px 0px 10px;

  .goods_cls_top {
    display: flex;
    padding: 10px 0 10px 0;
    width: 100%;

    div {
      flex: 1;
      text-align: center;
      padding-left: 10px;
    }

    div:nth-of-type(2),
    div:nth-of-type(3),
    div:nth-of-type(4),
    div:nth-of-type(6),
    div:nth-of-type(7),
    div:nth-of-type(8),
    div:nth-of-type(10),
    div:nth-of-type(11),
    div:nth-of-type(12) {
      margin: 0 0 0 5%;
    }
  }
}

.title_flow {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

//信息中心
.info-center {
  //border-radius: 10px;
  margin: 20px 0;
  padding: 20px 0;
  background: white;

  .top {
    .flagship {
      padding: 0 10px 0 10px;

      .title {
        font-size: 18px;
        color: #101010;
        height: 22px;
        line-height: 22px;
      }

      .second_title {
        color: #fd0404;
        font-size: 12px;
        padding: 2px 0 4px 0;
        height: 34px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }

    .security {
      padding: 0 10px 0 10px;

      .title {
        font-size: 18px;
        color: #101010;
        height: 22px;
        line-height: 22px;
        font-weight: bold;
      }

      .second_title {
        font-size: 12px;
        padding: 2px 0 4px 0;
        color: #ff9e00;
        height: 34px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }

  .bottom {
    .new {
      padding: 0 10px 0 10px;

      .title {
        font-size: 18px;
        color: #101010;
        height: 22px;
        line-height: 22px;
      }

      .second_title {
        color: #ff9e00;
        font-size: 12px;
        padding: 2px 0 4px 0;
        height: 54px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }

    .buyback {
      padding: 0 10px 0 10px;

      .title {
        font-size: 18px;
        color: #101010;
        height: 22px;
        line-height: 22px;
        font-weight: bold;
      }

      .second_title {
        font-size: 12px;
        padding: 2px 0 4px 0;
        color: #fd0404;
        height: 54px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }
}

.title_flow {
  font-weight: bold;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/deep/ .van-list__finished-text {
  height: 1px;
  margin: 20px 70px 20px 70px;
  border: 0.02px solid #e8e8e8;
}

.van-list {
  overflow: scroll;
  height: calc(100vh - 66px);
}

.van-list::-webkit-scrollbar {
  display: none;
}

.banner {
  text-align: center;
}

.banner .topback {
  background-color: #dddddd;
  padding-bottom: 30.2%;
  width: 100%;
}

.banner .bottomback {
  //background: #fff;
  padding-bottom: 11%;
  width: 100%;
}

.banner img {
  position: absolute;
  top: 0;
  left: 0.01%;
  width: 100%;
  // border-radius: 15px;
}

/deep/.van-swipe__indicators {
  bottom: 10%;
}

.banner {
  /deep/.van-swipe__indicator {
    background-color: #1d5ae8;
  }
}

.goods_name {
  padding-left: 6px;
  font-size: 13px;
  height: 25px;
  line-height: 30px;
  font-weight: bold;
  font-family: Arial;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  text-align: left;
  position: relative;
  color: #323233;
}

.goods_price {
  font-weight: bold;
  padding-left: 6px;
  display: inline-block;
  color: #000;
  height: 14px;
  line-height: 14px;
  text-align: left;
}

.get_price {
  color: red;
  padding: 0 4px;
  border: 0.2px solid red;
  border-radius: 3px;
  font-size: 10px;
  display: inline-block;
  margin-left: 4px;
  transform: scale(0.8);
  transform-origin: -10px -3px;
}

.couter_price {
  display: inline-block;
  font-size: 12px;
  color: #8e8e8e;
  transform: scale(0.8);
  transform-origin: 10px -25px;
  padding-left: 8px;
  text-decoration: line-through;
}

/deep/ .goodscategory {
  background-color: #fff;
  padding-top: 26px;
  border-radius: 10px;
  margin: 0 15px;

  .card:nth-child(odd) {
    padding: 6px 6px 6px 0px !important;
  }

  .card:nth-child(even) {
    padding: 6px 0px 6px 6px !important;
  }

  .van-tab {
    padding: 0;
  }

  .van-tabs__nav {
    background-color: transparent;
  }

  .van-tabs__content {
    background-color: #fff;
    border-radius: 0 0 10px 10px;
  }

  .van-tabs__wrap--scrollable .van-tab {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25% !important;
    flex: 0 0 25% !important;
  }

  .van-tabs--card > .van-tabs__wrap {
    border-radius: 10px 10px 0 0;
    height: 65px;
    padding: 10px 0 10px 0;
    background-color: #fff;
  }

  .van-tabs__nav--card {
    margin: 0;
    height: 45px;
    border: 0;
  }

  .van-tabs__nav--card .van-tab {
    border-right: 0;
    line-height: 22px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
  }

  .van-tabs__nav--card .van-tab.van-tab--active {
    color: #fd0404 !important;
    background-color: transparent !important;
  }

  .van-tabs__nav--card .van-tab {
    color: #101010;
    background-color: transparent !important;
  }

  .van-tabs__nav--card .van-tab.van-tab--active .second_title {
    background-color: #ff5b5b;
    color: #fff !important;
    font-weight: bold;
    border-radius: 25px;
    padding: 0 6px;
    height: 20px;
    line-height: 22px;
  }

  .van-tabs__nav--card .van-tab .second_title {
    color: #9f9d9d;
    display: inline-block;
  }

  .goods:nth-child(odd) {
    padding: 6px 6px 6px 0 !important;
  }

  .goods:nth-child(even) {
    padding: 6px 0 6px 6px !important;
  }

  .goods:nth-child(odd) .box_shadow {
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
  }

  .goods:nth-child(even) .box_shadow {
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
  }
}

.van-sidebar {
  width: 100%;
}

.van-image {
  vertical-align: bottom;
}

.hot_cont_top {
  display: flex;
  color: #1d5ae8;
  align-items: center;
  width: 93px;
  height: 55px;

  img {
    width: 100%;
  }

  span {
    font-size: 14px;
    font-weight: 700;
  }
}

.hot_cont {
  display: flex;
  width: 100%;

  margin-bottom: 25px;

  .hot_cont_rig {
    width: 100%;
    padding-left: 10px;
    padding-right: 14px;

    .cont1 {
      font-weight: 700;
      font-size: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .cont2 {
      font-size: 12px;
      color: rgba(166, 164, 164, 1);
      margin-top: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .cont3 {
      // margin-top: 7px;
      span {
        color: rgb(29, 90, 232);

        .van-tag:nth-of-type(n + 1) {
          margin: 7px 8px 0 0;
        }
      }
    }

    .cont4 {
      margin-top: 4px;
      font-size: 16px;
      font-weight: 700;
      color: rgba(247, 7, 7, 1);
    }

    .cont5 {
      display: flex;
      align-items: center;
      margin-top: 1px;
      font-size: 16px;
      font-weight: 700;

      img {
        margin-left: 6px;
        width: 48px;
        height: 16px;
      }
    }
  }
}

/deep/ .van-sidebar-item {
  display: block;
  box-sizing: border-box;
  padding: 35px 0;
  height: 100%;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  word-wrap: break-word;
  background-color: #efeff0;
  border-left: 0px solid transparent;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
}

/deep/ .van-sidebar-item__text {
  width: 100%;
  padding: 0 3px;
  // width: calc(100% - 16px);
}

.van-sidebar-item--select {
  display: flex;
  align-items: center;
  // padding: 0 0 0 16px !important;
  word-wrap: break-word;
  height: 70px;
  color: #323233;
  font-weight: 700;
  background-color: #fff;
  text-align: center;
}

.tab_home {
  background-color: #f2f1f6;
}

.van-sidebar-item--select::before {
  background-color: #fff;
}

.side_scroll {
  overflow: scroll;
  height: 100vh;
}

.side_scroll::-webkit-scrollbar {
  display: none;
}

.van-search {
  padding: 0.75rem 4%;
}

.van-search .van-cell {
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0 10px;
  padding-top: 0.26rem;
  padding-bottom: 0.1rem;
  background: #ffffff;
}

.van-search__content {
  border-radius: 0px !important;
  background: #dddddd !important;
}

.van-search,
.van-search__content {
  background: #f2f1f6 !important;
  //padding: 0.75rem 4%;
}

.van-search .van-cell {
  border: 1px solid #1d5ae8;
  border-radius: 0.5px;
  border-radius: 3px;
}
</style>
